<template>
  <div>
    <el-button type="success" @click="insertDialogVisibility = true"
      >新增商品</el-button
    >
    <el-dialog title="新增商品信息" :visible.sync="insertDialogVisibility">
      <el-form
        ref="commodityEntity"
        class="commodityEntity"
        :model="commodityEntity"
        :rules="rules"
        label-position="right"
        label-width="auto"
      >
        <el-form-item prop="commodityDescr" label="商品名称：">
          <el-input v-model.trim="commodityEntity.commodityDescr"> </el-input>
        </el-form-item>
        <el-row>
          <el-col :span="16">
            <el-form-item prop="typeFk" label="所属类别：">
              <el-select v-model="typeFkLabel">
                <el-option :label="typeFkLabel" style="height: auto">
                  <el-tree
                          :data="cmTypesTree.children"
                          :props="{ children: 'children', label: 'typeName' }"
                          @node-click="chooseType"
                  ></el-tree>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="typeFk">
              <el-input v-model="commodityEntity.typeFk" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item prop="retailPrice" label="零售价格：">
          <el-input v-model="commodityEntity.retailPrice"> </el-input>
        </el-form-item>
        <el-form-item prop="chargeUnit" label="计价单位：">
          <el-input v-model="commodityEntity.chargeUnit"> </el-input>
        </el-form-item>
        <el-form-item prop="specification" label="规格：">
          <el-input v-model="commodityEntity.specification"> </el-input>
        </el-form-item>
        <el-form-item prop="barCode" label="条形码：">
          <el-input v-model="commodityEntity.barCode"> </el-input>
        </el-form-item>
        <el-form-item prop="producingArea" label="产地：">
          <el-input v-model="commodityEntity.producingArea"> </el-input>
        </el-form-item>
        <el-form-item prop="qualityLevel" label="品质：">
          <el-input v-model="commodityEntity.qualityLevel"> </el-input>
        </el-form-item>


        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="commodityEntitySubmit()"
            >提交
          </el-button>
          <el-button
            type="warning"
            icon="el-icon-remove"
            @click="() => $refs.commodityEntity.resetFields()"
            >重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { commodityModuleApi } from "@/api/apis";
// import New from './components/New.vue';
export default {
  name: "InsertCommodityEntity",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      insertDialogVisibility: false,
      commodityEntity: {
        commodityDescr: "蒙牛利乐包纯牛奶",
        producingArea: "内蒙古第三旗",
        specification: "250ml",
        retailPrice: "2.90",
        chargeUnit: "盒",
        barCode: "11112233",
        qualityLevel: 1,
        typeFk: 6,

        commodityCode: "CC22034305000164",
        isDeleted: false,
        commodityId: 2,
      },
      typeFkLabel: null,
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
    cmTypesTree() {
      return this.$store.state.commodityTypesTree;
    },
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    commodityEntitySubmit() {
      // this.$http({
      //         method: "post",
      //         url: "/commodityEntity",
      //         data: this.commodityEntity,
      //       })
      commodityModuleApi.cmEntityInsertApi(this.commodityEntity).then(
        (res) => {
          this.$message.warning(JSON.stringify(res.data));
          if (res.data) {
            this.insertDialogVisibility = false;
            this.$emit("postInsert");
          }
        },
        (error) => {
          console.log(" request error : " + error.response.status);
        }
      );
    },
    chooseType(data) {
      /*
      * let data = {
      typeId: 0,
      typeName: "虚拟根节点",
      typeParentId: -1,
      typeLevel: 1,
      };
      * */
      if (data.children.length===0) {
        this.commodityEntity.typeFk = data.typeId;
        this.typeFkLabel = data.typeName;
      }

    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
